<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>订单</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/title.css" />
		<script src="js/mui.js" ></script>
		<script src="js/mui.min.js"></script>
		<script src="js/mui.pullToRefresh.js"></script>
		<script src="js/mui.pullToRefresh.material.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<style>
			.mui-card .mui-control-content {
				padding: 10px;
			}
			.mui-control-content {
				height: 610px;
				margin-bottom:30px;
			}
			
			.mui-bar{
				background-color: #3a3f43;
				height: 50px;
			}
			.buybox{
				height: 36px;
				width: 80px;
				text-align: center;
				line-height: 36px;
				background: #000000;
				color: white;
			}
			.buy-left{
				float: left;
			}
			.buy-right{
				float: left;
			}
			.buy-active{
				background: -webkit-linear-gradient(left,#fbed21,#fab03b);
    			color: #fff;
			}
			.mui-bar .mui-segmented-control{
				top: 0;
			}
			#segmentedControl{
				display: table;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav home_top">
			<div id="segmentedControl" class="mui-segmented-control" style="border: none;border-radius: 20px;">
				<div class="buybox buy-left buy-active">买入订单</div>
				<div class="buybox buy-right">卖出订单</div>
			</div>
		</header> 
		<div class="mui-content">
			<div id="segmentedControl_order" class="mui-segmented-control">
				<a class="mui-control-item mui-active" href="#firm_order">确认收款<span class="mui-badge"></span></a>
				<a class="mui-control-item" href="#unfinished">未完成订单</a>
				<a class="mui-control-item" href="#completed">已完成订单</a>
				<a class="mui-control-item" href="#saled">卖出记录</a>
			</div>
			<div class="mui-slider-group" id="mairu_list">
			
				<div id="firm_order" class="mui-control-content mui-active">
					<div id="scroll" class="mui-scroll-wrapper">
					<div class="mui-scroll">
					<ul class="mui-table-view">
						<p class="order_num">订单号：1231231213131</p>
						<li class="mui-table-view-cell">
							<div>
								<img class="mui-media-object mui-pull-left" src="img/logo.png">
								<div class="mui-media-body" style="margin: 0px;">
									<p>卡卡</p>
									<div class="credit">信任：<span>80%</span></div>
									<div class="credit">收款银行：<span>中国建设银行</span></div>
									<div class="credit mui-ellipsis-2">收款账号：<span>6222333344445555666</span></div>
								</div>
							</div>
							<div class="number_right " style="white-space: nowrap;">
								<span class="transaction_num">交易金额:1000</span>
								<span style="overflow: hidden;">实付金额：850.00RMB</span>
								<span>2018-06-21 12:21:22</span>
								<span class="button mui-pull-right" id="confirm" type="button">确认</span>
							</div>
						</li>
						<p class="order_num">订单号：1231231213131</p>
						<li class="mui-table-view-cell">
							<div>
								<img class="mui-media-object mui-pull-left" src="img/logo.png">
								<div class="mui-media-body">
									<p>卡卡</p>
									<div class="credit">信任：<span>80%</span></div>
									<div class="credit">收款银行：<span>中国建设银行</span></div>
									<div class="credit mui-ellipsis-2">收款账号：<span>6222333344445555666</span></div>
								</div>
							</div>
							<div class="number_right" style="white-space: nowrap;">
								<span class="transaction_num">交易金额:1000</span>
								<span style="overflow: hidden;">实付金额：850.00RMB</span>
								<span>2018-06-21 12:21:22</span>
								<a class="button mui-pull-right" href="pages/order/roll_out.html">确认</a>
							</div>
						</li>
					</ul>
				</div>
				</div>
				</div>
				
				<div id="unfinished" class="mui-control-content">
					<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
					<ul class="mui-table-view">
						<p class="order_num">订单号：1231231213131</p>
						<li class="mui-table-view-cell">
							<div>
								<img class="mui-media-object mui-pull-left" src="img/logo.png">
								<div class="mui-media-body">
									<p>卡卡</p>
									<div class="credit">信任：<span>80%</span></div>
									<div class="credit">收款银行：<span>中国建设银行</span></div>
									<div class="credit mui-ellipsis-2">收款账号：<span>6222333344445555666</span></div>
								</div>
							</div>
							<div class="number_right" style="white-space: nowrap;">
								<span class="transaction_num">交易金额:1000</span>
								<span style="overflow: hidden;">实付金额：850.00RMB</span>
								<span>2018-06-21 12:21:22</span>
								<span class="button mui-pull-right" id="cancel">撤单</span>
							</div>
						</li>
					</ul>
				</div>
			    </div>
				</div>
				
				<div id="completed" class="mui-control-content">
					<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
					<ul class="mui-table-view">
						<p class="order_num">订单号：1231231213131</p>
						<li class="mui-table-view-cell">
							<div>
								<img class="mui-media-object mui-pull-left" src="img/logo.png">
								<div class="mui-media-body">
									<p>卡卡</p>
									<div class="credit">信任：<span>80%</span></div>
									<div class="credit">收款银行：<span>中国建设银行</span></div>
									<div class="credit mui-ellipsis-2">收款账号：<span>6222333344445555666</span></div>
								</div>
							</div>
							<div class="number_right" style="white-space: nowrap;">
								<span class="button mui-pull-right" style="background-color:red;color:#fff;">交易成功</span>
								<span class="transaction_num">交易金额:1000</span>
								<span style="overflow: hidden;">实付金额：850.00RMB</span>
								<span>2018-06-21 12:21:22</span>
							</div>
						</li>
					</ul>
					</div>
					</div>
				</div>
				
				<div id="saled" class="mui-control-content">
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll">
					<ul class="saled_title">
						<li>卖出金额</li>
						<li>账户余额</li>
						<li>兑换时间</li>
					</ul>
					<ul class="saled_list">
						<li>
							<span>500</span>
							<span>181.1216</span>
							<span>2018-05-11<br/>12:12:12</span>
						</li>
						<li>
							<span>500</span>
							<span>181.1216</span>
							<span>2018-05-11<br/>12:12:12</span>
						</li>
					</ul>
					</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" charset="utf-8">
			//mui初始化
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			var info = document.getElementById("info");
			document.getElementById("confirm").addEventListener('tap', function() {
				var btnArray = ['否', '是'];
				mui.confirm('确认后无法更改，请谨慎处理', 'Kapay', btnArray, function(e) {
					if (e.index == 1) {
						info.innerText = '你刚确认MUI是个好框架';
					} else {
						info.innerText = 'MUI没有得到你的认可，继续加油'
					}
				})
			});
			var info1 = document.getElementById("info1");
			document.getElementById("cancel").addEventListener('tap', function() {
				var btnArray = ['否', '是'];
				mui.confirm('确认后无法更改，请谨慎处理', 'Kapay', btnArray, function(e) {
					if (e.index == 1) {
						info.innerText = '你刚确认MUI是个好框架';
					} else {
						info.innerText = 'MUI没有得到你的认可，继续加油'
					}
				})
			});
			
			
			(function($) {
				//阻尼系数
				var deceleration = mui.os.ios?0.003:0.0009;
				$('.mui-scroll-wrapper').scroll({
					bounce: false,
					indicators: true, //是否显示滚动条
					deceleration:deceleration
				});
				$.ready(function() {
					//循环初始化所有下拉刷新，上拉加载。
					$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
						$(pullRefreshEl).pullToRefresh({
							down: {
								callback: function() {
									var self = this;
									setTimeout(function() {
										var ul = self.element.querySelector('.mui-table-view');
										ul.insertBefore(createFragment(ul, index, 10, true), ul.firstChild);
										self.endPullDownToRefresh();
									}, 1000);
								}
							},
							up: {
								callback: function() {
									var self = this;
									setTimeout(function() {
										var ul = self.element.querySelector('.mui-table-view');
										ul.appendChild(createFragment(ul, index, 5));
										self.endPullUpToRefresh();
									}, 1000);
								}
							}
						});
					});
					var createFragment = function(ul, index, count, reverse) {
						var length = ul.querySelectorAll('li').length;
						var fragment = document.createDocumentFragment();
						var li;
						for (var i = 0; i < count; i++) {
							li = document.createElement('li');
							li.className = 'mui-table-view-cell';
							li.innerHTML = '第' + (index + 1) + '个选项卡子项-' + (length + (reverse ? (count - i) : (i + 1)));
							fragment.appendChild(li);
						}
						return fragment;
					};
				});
			})(mui);
			
		</script>
</html>